<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no">
    <meta name=x5-orientation content=portrait>
    <meta name=screen-orientation content=portrait>
    <title>贺卡</title>
    <link rel="stylesheet" href="{SITE_URL}app/{$GLOBALS['TS_URL']['app']}/css/card{$strCard['tplid']}.css">
    <script type="text/javascript" src="{SITE_URL}public/js/rem.js"></script>
    <script type="text/javascript" src="{SITE_URL}public/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="{SITE_URL}public/js/html2canvas.js"></script>
    <script type="text/javascript" src="{SITE_URL}public/js/smatchScreen.js"></script>
    <script type="text/javascript" src="{SITE_URL}public/js/jquery.qrcode.min.js"></script>
    <link rel="stylesheet" href="{SITE_URL}public/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="{SITE_URL}public/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="{SITE_URL}public/bootstrap/css/bootstrap.css">
    <script src="{SITE_URL}public/js/jquery.min.js" type="text/javascript"></script>
    <script src="{SITE_URL}public/js/mobileBUGFix.mini.js" type="text/javascript"></script>
    <script src="{SITE_URL}public/js/dateselect.js" type="text/javascript"></script>

    <!--jquery向下兼容-->
    <script src="{SITE_URL}public/js/jquery-migrate.js" type="text/javascript"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="{SITE_URL}public/bootstrap/js/bootstrap.min.js"></script>

    <!--bootstrap 前端验证-->
    <script type="text/javascript" src="{SITE_URL}public/js/bootstrap3-validation.js"></script>
</head>
<body>
<!--画报-->
<div class="poster" data-id="poster">
    <div class="container" data-id="container">
        <div class="word-box" style="text-align: left;margin-left: 60px;padding-left:5px;padding-right:5px;color:#ffffff;font-family: 宋体;padding-top: 30px ">


                <p>亲爱的{$strCard['touser']['username']}：</p>
                <p style="text-indent:2em">{$strCard['content']}</p>


                <p style="text-align: right">{$strCard['user']['username']}</p>
                <p style="text-align: right">{php echo date('Y-m-d',$strCard['sendtime'])}</p>




    </div>
</div>


    {if $GLOBALS['TS_USER']['userid']==$strCard['touserid']}
<!--操作按钮-->

<div class="download-image">
    <div class="button" data-bind="download">
        <img src="{SITE_URL}public/images/download.jpg" alt="图片" class="poster-image" data-id="image">
        <span style="padding: 20px">长按这里下载图片<i class="fa fa-download" aria-hidden="true"></i></span>

    </div>
</div>



{/if}


<script>
  $(function () {
    // 初始化一屏幕的高度
    var clientHeight = document.documentElement.clientHeight;
    $("[data-id='poster']").css({height:clientHeight+'px'});
    // 缩放图片
    SmatchScreen($("[data-id='container']").get(0), 'v-v', 750, 1334, false, false);

    // 此处是生成图片
    window.onload=function(){
      var screenRate = clientHeight / 1334
      html2canvas($("[data-id='container']").get(0),{
        useCORS:true,
        width:750*screenRate,
        height:1334*screenRate
      }).then(canvas => {
        var imgUrl = canvas.toDataURL();
        $('[data-id="image"]').attr('src',imgUrl)
      });
    }
  })
</script>



</body>
</html>